<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				padding:10px;
				width:50%;
			}
		</style>
	</head>
	<body>
		<h3>通过event参数，在顶层元素进行统一事件处理</h3>
		<ul>
			<li>event参数用于从事件触发者向事件处理函数传递数据</li>
			<li>event参数中包含诸如target(事件触发者)、eventType(例如click)等信息</li>
			<li>但是IE8更老版本中，event应用window.event代替，target应由srcElement代替</li>
			<li>event的stopPropagation(IE8以下是cancelBubble)函数可以阻止事件继续向上级元素触发</li>
			<li>event的preventDefault(IE8以下是returnValue=false)可以阻止元素的默认行为触发(例如，a元素click事件有可能触发其默认的页面导航行为)</li>
		</ul>
		<div id="topDiv" style="border:1px solid black">
			<div id="topDivText">TopDiv</div>
			<div id="secondaryDiv" style="border:1px solid blue">
				<div id="secondaryDivText">Secondary Div</div>
				<p id="p" style="border:1px solid green" onclick="pClick()">
					Click Me!
				</p>
			</div>
		</div>
		<script type="text/javascript" src="js/eventUtil.js" ></script>
		<script>
			window.onclick = function(event){
				event = EventUtil.getEvent(event);
				var target = EventUtil.getTarget(event);
				console.log("检测到元素：" + target.id + "的点击事件");
			}
			function pClick(event){
				event = EventUtil.getEvent(event);
				var target = EventUtil.getTarget(event);
				console.log("元素" + target.id + "正在处理事件");
				
				// 观察下列语句的作用
				//EventUtil.stopPropagation(event);
			}
		</script>
	</body>
</html>
